<template>
  <div class="gva-table-box">
    <div class="gva-btn-list search-form">
      <el-form ref="formRef" :model="OrderInfo" style="width: 100%">
        <el-row :gutter="20" class="flex">
          <el-col :span="5">
            <el-form-item label="仓库" prop="wid">
              <el-select
                clearable
                filterable
                v-model="OrderInfo.wid"
                style="width: 100%"
                placeholder="仓库"
              >
                <el-option
                  v-for="option in wareList"
                  :key="option.wid"
                  :value="option.wid"
                  :label="option.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-button
                type="primary"
                icon="Search"
                class="action"
                style="margin-left: 20px"
                @click="getsearch"
                >搜索</el-button
              >
              <el-button class="action reset" @click="resetForm()">重置搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <div>
        <el-table
          :data="dataList"
          row-key="ID"
          :row-class-name="tableRowClassName"
          style="height: 480px"
        >
          <el-table-column align="center" label="序" min-width="75">
            <template #default="scope">
              <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="SKU"
            min-width="200"
            prop="sku"
          />
          <el-table-column
            align="center"
            label="FNSKU"
            min-width="200"
            prop="fnsku"
          >
          <template #default="scope">
              {{scope.row.fnsku?scope.row.fnsku:scope.row.sku }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="店铺"
            min-width="180"
            prop="wid"
          >
            <template #default="scope">
              {{ getsearchshop(scope.row.seller_id) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="商品ID"
            prop="product_id"
          />
          <el-table-column align="center" label="仓库" 
          min-width="200"
          prop="wid">
            <template #default="scope">
              {{ getwarehouse(scope.row.wid) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="实际库存总量"
            min-width="180"

            prop="product_total"
          />
          <el-table-column
            align="center"
            label="可用量"
            prop="product_valid_num"
          />
          <el-table-column
            align="center"
            label="次品量"
            prop="product_bad_num"
          />
          <el-table-column
            align="center"
            label="待检待上架量"
          min-width="200"

            prop="product_qc_num"
          />
          <el-table-column
            align="center"
            label="锁定量"
            prop="product_lock_num"
          />
          <el-table-column
            align="center"
            label="库存成本"
            prop="stock_cost_total"
          />
          <el-table-column
            align="center"
            label="待到货量"
            prop="quantity_receive"
          />
          <el-table-column
            align="center"
            label="单位库存成本"
          min-width="200"

            prop="stock_cost"
          />
          <el-table-column
            align="center"
            label="调拨在途"
            prop="product_onway"
          />
          <el-table-column
            align="center"
            label="调拨在途头程成本"
          min-width="200"

            prop="transit_head_cost"
          />
          <el-table-column
            align="center"
            label="平均库龄"
            prop="average_age"
          />
          <el-table-column
            align="center"
            label="0-15天库龄"
          min-width="200"

            prop="qty1"
          />
          <el-table-column
            align="center"
            label="16-30天库龄"
          min-width="200"

            prop="qty2"
          />
          <el-table-column
            align="center"
            label="31-90天库龄"
          min-width="200"

            prop="qty3"
          />
          <el-table-column
            align="center"
          min-width="200"

            label="90天以上库龄"
            prop="qty4"
          />
        </el-table>
        <div class="gva-pagination">
          <el-pagination
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 40]"
            layout="prev, pager, next, jumper, total, sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { getInventoryList, getwarehouselist,getShoplist } from "@/api/orderlimit";
import { useRoute, useRouter } from "vue-router";
defineOptions({
  name: "LxOrder",
});
const props = defineProps({
    wareSearch: Array,
  wareList: Array,
  shopSearch:Array
})
const route = useRoute();
const router = useRouter();
// 获取商品列表
const dataList = ref([]);
const wareList = ref([]);
const wareSearch = ref([]);
const shopList = ref([]);
const shopSearch = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const query = route.query;
watch(
  () => props.wareSearch,
  (newValue, oldValue) => {
    wareSearch.value = props.wareSearch

  }
);
watch(
  () => props.wareList,
  (newValue, oldValue) => {
    wareList.value = props.wareList
  }
);
watch(
  () => props.shopSearch,
  (newValue, oldValue) => {
    shopSearch.value = props.shopSearch
    getOrderData(OrderInfo);

  }
);
const OrderInfo = reactive({
  wid: "",
});

const getsearchshop = (sid)=>{
    console.log(sid);
    if(shopSearch.value[sid]){
        return shopSearch.value[sid]
    }else{
        return ''
    }
}
// getWareData();
function add0(m) {
  return m < 10 ? "0" + m : m;
}

const getOrderData = async (requestdata) => {
  requestdata.PageIndex = page.value;
  requestdata.PageSize = pageSize.value;
  const res = await getInventoryList(requestdata);
  if (res.errcode === 0) {
    dataList.value = res.content;
    total.value = Number(res.totalRecords);
  }
};
const getwarehouse = (wid) => {
    console.log(wareSearch);
  if (wareSearch.value[wid]) {
    return wareSearch.value[wid];
  } else {
    return "";
  }
};
const getsearch = async () => {
  page.value = 1;

  getOrderData(OrderInfo);
};

const handleCurrentChange = (num) => {
  page.value = num;
  getOrderData(OrderInfo);
};

const handleSizeChange = (num) => {
  pageSize.value = num;
  getOrderData(OrderInfo);
};
const formRef = ref();
const resetForm = () => {
  formRef.value.resetFields();
  // OrderInfo.platform_order_no = '';
  // OrderInfo.global_order_no = '';
  // OrderInfo.wid = '';
  getOrderData(OrderInfo);
};
const tableRowClassName = ({ row, rowIndex }) => {
  // 通过rowIndex判断奇偶行，添加不同的类名
  if (rowIndex % 2 === 0) {
    return "even-row";
  } else {
    return "odd-row";
  }
};
</script>

<style lang="scss" scoped>
.balanceTitle {
  font-size: 20px;
  margin-bottom: 20px;
}
.activetitle {
  color: red;
  margin-left: 12px;
}
.red {
  color: red;
}
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.gva-table-box {
  margin: 20px;
}

:deep(.el-input__inner) {
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

:deep(.el-select__wrapper) {
  font-size: 12px !important;

  .el-select__selected-item {
    font-size: 12px !important;
  }
}

.logo-img {
  width: 46px;
}
</style>

<style lang="scss">
:deep(.el-form-item) {
  align-content: center;
}
</style>
